<template>
  <div>
    <h3>系统信息</h3>
    <el-table :data="systemData">
      <el-table-column prop="name" label="指标" />
      <el-table-column label="数值">
        <template #default="{ row }">
          <el-progress
              :percentage="parseFloat(row.value)"
              :color="customColors"
              :show-text="true"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import api from '../api'

const systemData = ref([])

// 自定义进度条颜色
const customColors = [
  { color: '#f56c6c', percentage: 20 }, // 低于20%为红色
  { color: '#e6a23c', percentage: 40 }, // 20%-40%为橙色
  { color: '#5cb87a', percentage: 60 }, // 40%-60%为绿色
  { color: '#1989fa', percentage: 80 }, // 60%-80%为蓝色
  { color: '#6f7ad3', percentage: 100 } // 80%-100%为紫色
]

// 获取系统信息的函数
const fetchSystemInfo = async () => {
  try {
    const res = await api.getSystemInfo()
    systemData.value = [
      { name: 'CPU占用', value: res.data.data.cpu },
      { name: '内存占用', value: res.data.data.memory },
      { name: '磁盘占用', value: res.data.data.disk }
    ]
  } catch (error) {
    console.error('获取系统信息失败:', error)
  }
}

// 组件挂载时立即获取一次数据，并启动定时器
onMounted(() => {
  fetchSystemInfo() // 立即获取一次
  const intervalId = setInterval(fetchSystemInfo, 5000) // 每5秒刷新一次

  // 在组件卸载时清除定时器
  onUnmounted(() => {
    clearInterval(intervalId)
  })
})
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>